<template>
  <div class="shoppingUnderstand" v-loading="loading">
    <el-tooltip class="item" effect="dark" content="可以图片点击放大哦" v-model="hideFlag" placement="bottom">
      <el-image
          style="width: 100%;height: 100%"
          :src="firstImg[0]"
          fit="scale-down"
          @load="loadsc"
          :preview-src-list="firstImg">
      </el-image>
    </el-tooltip>
    <el-image v-for="url in srcList" :key="url" :src="url" @load="imgFlag=true" lazy :preview-src-list="srcList"></el-image>
    <el-row>
      <el-tooltip placement="top" :disabled="red_tip_disabled">
        <div slot="content">
          {{time}}后可以确定
        </div>
        <el-checkbox v-model="checked" :disabled="red_disabled">我已知晓</el-checkbox>
      </el-tooltip>
    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-button type="primary" :disabled="button_disabled" @click="btn_next">下一步</el-button>
    </el-row>
  </div>
</template>

<script>
import jqxz1 from "@/assets/jqxz.png";
import jqxz3 from "@/assets/xbqbtgn.png";
import jqxz2 from "@/assets/xbqnbq.png";
export default {
  name: "ShoppingUnderstand",
  data(){
    return {
      hideFlag:false,
      red_tip_disabled:false,
      red_disabled:true,
      firstImg:[jqxz1],
      srcList:[jqxz2,jqxz3],
      time:10,//强制阅读秒数
      checked:false,
      button_disabled:true,
      loading:true,
      imgFlag1:false,
      imgFlag2:false
    }
  },
  methods:{
    loadsc(){
      this.imgFlag1=true;
      this.hideFlag=true;
      this.loading=false;
      setTimeout(()=>this.hideFlag=false,2000)
    },
    btn_next(){
      this.$emit('active_event',2,1)
    },
  },
  mounted() {
    setInterval(()=>{
      if(this.time===0){
        this.red_disabled=false
        this.red_tip_disabled=true
        clearInterval();
      }else{
        this.time--;
      }
    },1000)
  },
  watch:{
    checked(){
      if(this.checked){
        this.button_disabled=false;
        this.$emit('active_event',1,1)
      }else{
        this.button_disabled=true;
        this.$emit('active_event',1,0)
      }
    }
  },
  computed:{
    loadingFlag(){
      if(this.imgFlag1 && this.imgFlag2){
        this.loading=false;
      }
    }
  }
}
</script>

<style scoped>

</style>